<template>
    <div id="Profile">
        <vj-form :cfg-list="cfgList" :slot-idx="[0]" :form.sync="formData">
            <template #form-items="{idx}">
                <van-cell class="c-cell" v-if="idx === 0" title="头像"  border >
                    <van-uploader max-count="1" v-model="fileList" :after-read="afterRead"/>
                </van-cell>
                <!--                <van-cell v-else title="手机号" value="123123" is-link border @click=""></van-cell>-->
            </template>
        </vj-form>
        <vj-form style="margin-top: 20px" :cfg-list="subCfgList" :form.sync="formData"/>
        <van-button size="large" type="primary" style="margin-top: 10px" @click="onSubmit">提交</van-button>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import VjForm from "@/components/logic/vj-form.vue";
    import {PROFILE_FM, PROFILE_FM_SUB} from "@/config/forms";
    import {cloneDeep, excludeEmpty} from "vijay-util";
    import {mapState} from "vuex";
    import {requestByPost, requestByPut, requestByUpload} from "@/utils/request";

    @Component({
        components: {VjForm},
        computed: mapState(["userInfo"])
    })
    export default class Profile extends Vue implements ComponentOptions<Vue> {
        name = "Profile";
        cfgList = PROFILE_FM;
        subCfgList = PROFILE_FM_SUB;
        formData: any = {};
        fileList: any = [];
        created() {
            this.formData = cloneDeep(this.userInfo)
            this.fileList = [{url: this.formData["avatar"]}]
        }
        async afterRead({file}) {
            this.formData["avatar"] = await requestByUpload({file});
        }
        async onSubmit() {
            await requestByPut(`sys/user/editUser`,excludeEmpty( Object.assign({}, this.formData)));
            this.$toast.success("操作成功！");
            this.$popRoute();
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #Profile {
        .c-cell {
            @include alignCenter;
            &__avatar {
                @include round(50px);
                margin-right: 6px;
            }
        }
    }
</style>
